<script setup>
import {onMounted, reactive, ref} from "vue";
import {useRoute} from "vue-router";
import UploadComponent from "@/components/index/UploadComponent.vue";
import {$ajax, apiUrl} from "@/utils/ajax";
import PageComponent from "@/components/index/PageComponent.vue";

const data = reactive([])
const loading = ref(false)
const show = ref(false)
const codeDate = reactive({number: 1, setPwd: false, lent: 6, type: 'number', id: ""})
const route = useRoute()
const acts = ref("add")
const pageSize = ref(100)
const page = ref(1)
const total = ref(0)
const state = ref("")
const create_code = () => {
  loading.value = true
  codeDate.id = route.params.id
  $ajax.post(`${apiUrl}admin/product/create_code`, codeDate).then(() => {
    loading.value = false;
    show.value = false
    handlData(1)
  }).catch(() => loading.value = false)
}
const handlData = p => {
  page.value = p
  loading.value = true;
  $ajax.get(`${apiUrl}admin/product/code_page`, {
    params: {
      page: page.value,
      pageSize: pageSize.value,
      pid: route.params.id,
      state: state.value
    }
  }).then(({data: {result: {lst, total: tol}}}) => {
    data.splice(0, data.length, ...lst)
    total.value = tol
    loading.value = false
  }).catch(() => loading.value = false)
}
onMounted(() => {
  handlData(1)
})
const upload_success = () => {
  show.value = false
  handlData(1)
}
</script>

<template>
  <div class="breadcrumb">
    <el-breadcrumb>
      <el-breadcrumb-item :to="{name: 'home'}">首页</el-breadcrumb-item>
      <el-breadcrumb-item :to="{name: 'productLst'}">产品管理</el-breadcrumb-item>
      <el-breadcrumb-item>消费券码</el-breadcrumb-item>
    </el-breadcrumb>
  </div>
  <div class="search">
    <el-form inline >
      <el-form-item label="券码状态">
        <el-radio-group v-model="state" @change="handlData(1)">
          <el-radio-button label="全部" value=""/>
          <el-radio-button label="未领取" value="1"/>
          <el-radio-button label="已领取" value="2"/>
        </el-radio-group>
      </el-form-item>
      <el-form-item>
        <el-button-group>
<!--          <el-button type="primary" @click="show = true">查询</el-button>-->
          <el-button type="primary" @click="show = true">新增</el-button>
        </el-button-group>
      </el-form-item>
    </el-form>
  </div>
  <el-table :data="data" v-loading="loading" height="70vh" border stripe size="small" class="table-data">
    <el-table-column prop="code" label="券码"/>
    <el-table-column prop="code" label="是否有密码">
      <template #default="{row}">
        <el-text size="small" v-if="row.pwd" type="success">是</el-text>
        <el-text size="small" v-else type="danger">否</el-text>
      </template>
    </el-table-column>
    <el-table-column prop="product.name" label="产品"/>
    <el-table-column prop="state" label="状态">
      <template #default="{row}">
        <el-text size="small" v-if="row.state === 2" type="success">已领取</el-text>
        <el-text size="small" v-else type="primary">未领取</el-text>
      </template>
    </el-table-column>
  </el-table>
  <page-component :size="pageSize" :page="page" :total="total" @get-data="handlData"/>
  <el-drawer title="添加券码" v-model="show" size="45%">
    <el-tabs v-model="acts">
      <el-tab-pane label="随机生成" name="add">
        <el-form label-position="left" label-width="100px" :model="codeDate">
          <el-form-item label="券码数量">
            <el-input-number v-model="codeDate.number" :min="1" :max="1000"/>
            <el-text type="info">单次添加数量不能超过1000</el-text>
          </el-form-item>
          <el-form-item label="是否设置密码">
            <el-switch v-model="codeDate.setPwd" inline-prompt active-text="是" inactive-text="否"/>
          </el-form-item>
          <el-form-item label="券码长度">
            <el-input-number v-model="codeDate.lent" :min="6" :max="16"/>
          </el-form-item>
          <el-form-item label="券码类型">
            <el-select v-model="codeDate.type">
              <el-option label="数字" value="number"/>
              <el-option label="字母" value="decama"/>
              <el-option label="字母数字组合" value="string"/>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="create_code" class="edit-btn" round :loading="loading">生成券码
            </el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="导入券码" name="upload">
        <el-form label-position="left" label-width="100px" :model="codeDate">
          <el-form-item label="上传券码">
            <upload-component :upload-path="`${apiUrl}upload/product_code`"
                              file_name="product_code" :show-file-list="false" @upload-success="upload_success"
                              uploadBtn="btn"
                              :upload-id="{file_name:'product_code',pid:route.params.id}"/>
          </el-form-item>
        </el-form>
      </el-tab-pane>
    </el-tabs>
  </el-drawer>
</template>

<style scoped lang="scss">

</style>
